import {
  DownOutlined,
  UpOutlined,
  BlockOutlined,
  CopyOutlined,
  DeleteOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  UndoOutlined,
  RedoOutlined,
} from '@ant-design/icons';
import { Button, Space, Tooltip } from 'antd';
import { FC, useState } from 'react';
import { useDispatch } from 'react-redux';
import {
  deleteComponent,
  changeComponentHidden,
  toggleComponentLocked,
  copySelectedComponent,
  pasteComponent,
  moveComponent,
} from '../../../../../store/componentReducer';
import useGetComponentInfo from '../../../../../hooks/useGetComponentInfo';
import { ActionCreators } from 'redux-undo';
const EditToolbar: FC = () => {
  const dispatch = useDispatch();
  const { selectedId, selectedComponent, copiedComponent, componentList, undoStep } =
    useGetComponentInfo();
  const { isLocked } = selectedComponent || {};
  const length = componentList.length;
  const selectedIndex = componentList.findIndex((component) => component.fe_id === selectedId);
  const isFirst = selectedIndex <= 0; //不能上移
  const isLast = selectedIndex >= length - 1 || selectedIndex == -1; //不能下移
  const undoStepCount = undoStep;
  const [redoStepCount, setRedoStepCount] = useState(0);
  function handleDelete() {
    dispatch(deleteComponent());
  }
  function handleHidden() {
    dispatch(changeComponentHidden({ fe_id: selectedId, isHidden: true }));
  }
  function handleLock() {
    dispatch(toggleComponentLocked());
  }
  function handleCopy() {
    dispatch(copySelectedComponent());
  }

  function handlePaste() {
    dispatch(pasteComponent());
  }

  function handleUp() {
    dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex - 1 }));
  }

  function handleDown() {
    dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex + 1 }));
  }

  function undo() {
    dispatch(ActionCreators.undo());
    setRedoStepCount((redoStep) => redoStep + 1);
    console.log('redoStepCount', redoStepCount);
  }
  function redo() {
    dispatch(ActionCreators.redo());
    setRedoStepCount((redoStep) => redoStep - 1);
    console.log('redoStepCount', redoStepCount);
  }
  return (
    <Space>
      <Tooltip title="删除">
        <Button shape="circle" icon={<DeleteOutlined />} onClick={handleDelete} />
      </Tooltip>
      <Tooltip title="隐藏">
        <Button shape="circle" icon={<EyeInvisibleOutlined />} onClick={handleHidden} />
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          shape="circle"
          icon={<LockOutlined />}
          onClick={handleLock}
          type={isLocked ? 'primary' : 'default'}
        />
      </Tooltip>
      <Tooltip title="复制">
        <Button shape="circle" icon={<CopyOutlined />} onClick={handleCopy} />
      </Tooltip>
      <Tooltip title="粘贴">
        <Button
          shape="circle"
          icon={<BlockOutlined />}
          onClick={handlePaste}
          disabled={copiedComponent == null}
        />
      </Tooltip>
      <Tooltip title="上移">
        <Button shape="circle" icon={<UpOutlined />} onClick={handleUp} disabled={isFirst} />
      </Tooltip>
      <Tooltip title="下移">
        <Button shape="circle" icon={<DownOutlined />} onClick={handleDown} disabled={isLast} />
      </Tooltip>
      <Tooltip title="撤销">
        <Button
          shape="circle"
          icon={<UndoOutlined />}
          onClick={undo}
          disabled={undoStepCount <= 0}
        />
      </Tooltip>
      <Tooltip title="重做">
        <Button
          shape="circle"
          icon={<RedoOutlined />}
          onClick={redo}
          disabled={redoStepCount <= 0}
        />
      </Tooltip>
    </Space>
  );
};

export default EditToolbar;
